<template>
	<view class="page">
		<view class="body">
			<view>
				<view class="uni-container">
					<uni-table ref="table" :loading="loading" stripe emptyText="暂无更多数据"
						@selection-change="selectionChange">
						<uni-tr>
							<uni-th width="30" align="center">
								<label>
									<checkbox :value="isAll" :checked="isAll" class="circle" @click="choose_all()" />
								</label>
							</uni-th>
							<uni-th width="30" align="center">ID</uni-th>
							<uni-th align="center" width="100">分类名称</uni-th>
							<uni-th width="60" align="center">操作</uni-th>
						</uni-tr>
						<!-- <checkbox-group @change="checkboxChange"> -->
						<uni-tr v-for="(item, index) in dataList" :key="index">
							<uni-td align="center">
								<label>
									<checkbox :value="item.id" :checked="item.checked" class="circle"
										@click="choose(item.id)" />
								</label>
							</uni-td>
							<uni-td align="center">{{ item.id }}</uni-td>
							<uni-td align="center">
								<view class="name">{{ item.name }}</view>
							</uni-td>
							<uni-td align="center">
								<view class="operate" @click="bianji(item.id)">
									编辑
								</view>
								<!-- <view class="operate" @click="delTable(item.id)">
									删除
								</view> -->
							</uni-td>
						</uni-tr>
						<!-- </checkbox-group> -->
					</uni-table>
				</view>
			</view>
		</view>
		<view class="btn_css justify-content-sp">
			<view class="btn_cs_left" @click="delTable">
				批量删除
			</view>
			<view class="bttn_cs_right" @click="openAddClassify">
				新增分类
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup_css">
				<section>分类名称</section>
				<view class="input">
					<input type="text" placeholder="请输入内容" class="input_css" v-model="name" />
				</view>
				<view class="bto justify-content-sp">
					<view class="bto_btn_left" @click="cancel">
						取消
					</view>
					<view class="bto_btn_right" @click="addClassify">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="edit_popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popup_css">
				<section>分类名称</section>
				<view class="input">
					<input type="text" placeholder="请输入内容" class="input_css" v-model="names" />
				</view>
				<view class="bto justify-content-sp">
					<view class="bto_btn_left" @click="cancel">
						取消
					</view>
					<view class="bto_btn_right" @click="editClassify">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getList,
		getadd,
		getdel,
		getOne,
		getedit
	} from '../../api/index/index.js'
	export default {
		data() {
			return {
				loading: false,
				isAll: false,
				dataList: [],
				selectedIndexs: [], //多选下标
				name: '',
				names: '',
				id: '',
				indexList: [],
				isAll: false
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			choose(e) {
				var index = this.indexList.indexOf(e);
				console.log("这是下标", index);
				if (index == -1) {
					this.indexList.push(e);
				} else {
					this.indexList.splice(index, 1)
				}
			},
			choose_all() {
				this.isAll = !this.isAll;
				console.log(this.isAll);
				if (this.isAll) {
					for (var i = 0; i < this.dataList.length; i++) {
						this.dataList[i].checked = true;
						this.indexList.push(this.dataList[i].id);
					}
				} else {
					for (var i = 0; i < this.dataList.length; i++) {
						this.dataList[i].checked = false
					}
					this.indexList = []
				};
			},
			init() {
				getList().then(res => {
					this.dataList.push(...res.data)
				})
			},
			bianji(e) {
				var data = {
					id: e
				};
				this.id = e;
				getOne(data).then(res => {
					this.names = res.data.name;
					console.log(this.name);
					this.$refs.edit_popup.open('center')
				})
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable(e) {
				let newArr = this.indexList.join(',');
				var data = {
					id: newArr
				}
				getdel(data).then(res => {
					console.log(res);
					this.dataList = [];
					this.init();
				})
			},
			// 打开新增分类
			openAddClassify() {
				this.$refs.popup.open('center')
			},
			// 关闭弹窗
			cancel() {
				this.$refs.popup.close('center')
				this.$refs.edit_popup.close('center')
			},
			// 新增分类
			addClassify() {
				var data = {
					name: this.name,
				}
				getadd(data).then(res => {
					console.log(res);
					this.dataList = [];
					this.init()
				})
				this.$refs.popup.close('center')
			},
			// 编辑分类
			editClassify() {
				var data = {
					name: this.names,
					id: this.id
				}
				getedit(data).then(res => {
					console.log(res);
					this.dataList = [];
					this.init()
				})
				this.$refs.edit_popup.close('center')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.body {
			.operate {
				border: 1px solid #b2b2b2;
				border-radius: 30rpx;
				font-size: 12px;
			}
		}

		.btn_css {
			padding: 50rpx 80rpx;

			.btn_cs_left {
				padding: 20rpx 40rpx;
				border: 1px solid #b2b2b2;
				border-radius: 50rpx;
				background-color: white;
			}

			.bttn_cs_right {
				padding: 20rpx 40rpx;
				border: 1px solid #6796ff;
				border-radius: 50rpx;
				background-color: #6796ff;
				color: white;
			}
		}

		.popup_css {
			background-color: white;
			width: 570rpx;
			padding: 30rpx;
			border-radius: 30rpx;

			.input {
				padding: 30rpx 0;

				.input_css {
					background-color: #f5f6f9;
					padding: 30rpx;
					border-radius: 30rpx;
				}
			}

			.bto {
				padding: 20rpx 40rpx;

				.bto_btn_left {
					padding: 20rpx 80rpx;
					border: 1px solid #b2b2b2;
					border-radius: 50rpx;
					background-color: white;
				}

				.bto_btn_right {
					padding: 20rpx 80rpx;
					border: 1px solid #6796ff;
					border-radius: 50rpx;
					background-color: #6796ff;
					color: white;
				}
			}
		}
	}
</style>